<!DOCTYPE html>
<html>

<head lang="en">
    <title>酒店房间</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(function () {
            var params = getParams();
            if (params.id) {
                //根据酒店id获取酒店信息
                $.get("/hotels/",{id:params.id},function (data) {

                    $("#intro").renderValues(data)
                });

                //根据酒店id查询酒店的房间
                $.get("/hotels/" + params.id + "/rooms", function (data) {

                    $("#chooseRoom").renderValues({list: data},{getId:function (item,value) {
                            $(item).attr("data-id",value);
                        }});


                    //预定按钮绑定点击事件
                    $(".orderBtn").click(function () {

                        var user=JSON.parse(sessionStorage.getItem("user"));

                         if(user==null){
                              $(document).dialog({
                                  titleShow: false,
                                  content: '温馨提示:登录后才能预定酒店!',
                              });
                              setTimeout(function () {
                                  window.location.href="/login.html"
                              },2000)

                          }else{
                             //获取预定酒店房间的id
                             var id=$(this).data("id");
                             //根据酒店房间id查询相关信息
                             $.get("/rooms/"+id,function (data) {
                                 sessionStorage.setItem("rooms",JSON.stringify(data))
                                 window.location.href="/mine/hotelOrder.html"

                             })

                         }
                    } )


                })



            }
        })
    </script>


</head>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade active show" id="pills-top">
        <!--酒店简介-->
        <div class="container commend">
            <div id="intro">
                <img render-src="coverUrl">
                <h4 render-html="name"></h4>
                酒店简介:<p render-html="intro"></p>
            </div>
        </div>
        <hr>
        <div class="container strategyCommend">
            <h6>房型选择:</h6>
            <div id="chooseRoom">
                <div class="row rooms">
                    <div render-loop="list" class="row">
                        <div class="col-4">
                            <img render-src="list.coverUrl" width="100%">
                            <div class="row>">
                                    <span render-html="list.typeName"></span>
                                    <br>
                                    <div>
                                        <i style="color: red">￥</i>
                                        <span style="font-weight: bold;color: red;" render-html="list.price">价格</span>
                                    </div>

                                    <button type="button" class="btn btn-warning orderBtn" render-key="list.id" render-fun="getId">
                                        <span>预定</span>
                                    </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!--酒店预定模态框-->
<div id="hotelOrderModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <form id="orderForm" class="form-control" method="post" action="">
                    <input id="reset" type="reset" style="display: none"/>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">订单信息</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="hotel.id"  width="120%">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">入住日期:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="beginDate"  width="120%">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">离店日期</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="endDate"  width="120%">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">房型</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="endDate"  width="120%">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">会员价</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="endDate"  width="120%">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="hotel_tlist"><h6 class="title">房间设施:</h6>
                            <p class="facilities">
                                <span>电视机</span>
                                <span>空调</span>
                                <span>24小时热水</span>
                                <span>浴缸</span>
                                <span>吹风机</span>
                                <span>淋浴设施</span>
                                <span>独立卫浴间</span>
                                <span>衣架</span>
                                <span>毛巾</span>
                                <span>免费洗漱用品</span>
                                <span>无障碍卫生间</span>
                            </p>
                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn btn-success" id="saveStrategyBtn" aria-hidden="true">确定</a>
                <a href="javascript:void(0);" class="btn" data-dismiss="modal" aria-hidden="true">取消</a>
            </div>
        </div>
    </div>
</div>

</body>

</html>